@import "ui-variables";
@import "ui-mixins";

.box-shadow() {
  // atom uses `!important by default, so we need to overwrite this
  box-shadow:
    inset 0 0 0 1/@rem hsla(0,0%,0%, 0.07),
    inset 0 -1/@rem 0 0 hsla(0,0%,0%, 0.3) !important;
}

// Default button
.btn {
  .mixin-btn(@button-background-color);
  .box-shadow();

  color: @button-text-color; // overwrite mixin

  &:active,
  &:focus {
    .box-shadow();

    background: linear-gradient(to top, darken(@button-background-color, 15%), @button-background-color);
    color: @button-text-color; // overwrite mixin
  }

  &.selected,
  &.selected:hover,
  &.selected.icon:hover {
    background: linear-gradient(to top, darken(@background-color-selected, 15%), @background-color-selected);
    color: @button-text-color-inverted;
  }

  &.icon:hover {
    color: @button-text-color; // overwrite mixin
  }
} // .btn

// Button in different states
.btn.btn-info,
.btn.btn-primary {
  .mixin-btn(@background-color-selected);
  .mixin-btn-colored--active-focus-selected(@background-color-selected);
}

.btn.btn-success {
  .mixin-btn(@background-color-success);
  .mixin-btn-colored--active-focus-selected(@background-color-success);
}

.btn.btn-warning {
  .mixin-btn(@background-color-warning);
  .mixin-btn-colored--active-focus-selected(@background-color-warning)
}

.btn.btn-error {
  .mixin-btn(@background-color-error);
  .mixin-btn-colored--active-focus-selected(@background-color-error);
}

// Button groups

.btn-group > .btn,
.btn-group > .btn-info {
  border: none;

  &.selected {
    border-left-color: transparent;
  }

  &:first-child {
    border-left: none;
  }

  &:only-child {
    border: none;
  }
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  opacity: 0.5;
}

.section-heading .btn {
  font-family: @font-family;
}

// Fix button groups

.btn-group > .btn:first-child {
  border-top-left-radius: @component-border-radius-small;
  border-bottom-left-radius: @component-border-radius-small;
}

.btn-group > .btn:last-child,
.btn-group > .btn.selected:last-child,
.btn-group > .dropdown-toggle {
  border-top-right-radius: @component-border-radius-small;
  border-bottom-right-radius: @component-border-radius-small;
}

// This is a bit of a hack. Otherwise the “Uninstall” button has no rounded corners, since the :only-child rule doesn’t apply here.
.btn.icon[style="display: none;"] + .btn.icon,
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-top-left-radius: @component-border-radius-small;
  border-bottom-left-radius: @component-border-radius-small;
}
